<template>
  <div class="z-tab-bar max-w-screen-sm cursor-pointer select-none">
    <div
        v-for="(item,index) in tabList"
        :key="index"
        :class="selectIndex === index ? 'select-index' : ''"
        @click="toChange(index)"
        style="position: relative;flex: 1;"
    >
      <van-icon :name="item.iconName" />
    </div>
  </div>
</template>
<script setup lang="ts">
import { ref } from 'vue';
defineProps({
  tabList: {
    type: Array as () => Array<{ id: number, name: string }>,
    default: () => [
      {
        id:1,
        iconName:'wap-home-o'
      },
      {
        id:2,
        iconName:'idcard'
      },
      {
        id:3,
        iconName:'bookmark-o'
      },
      {
        id:4,
        iconName:'manager-o'
      },
    ]
  }
})
const emit = defineEmits(['change'])
let selectIndex = ref<Number>(0)
const toChange = (index: Number) => {
  // if (index === 2) return;
  selectIndex.value = index;
  emit('change',index)
}
</script>
<style lang="scss">
.z-tab-bar {
  position: fixed;
  bottom: 0;
  height: 52px;
  display: flex;
  width: 100%;
  justify-content: space-around;
  text-align: center;
  background: white;
  //color: white;
  .center-big {
    width: 50px;
    position: absolute;
    bottom: 0px;
    left: 50%;
    transform: translate(-50%);
    height: 50px;
    background-color: #ffd01e;
    color: white;
    font-size: 28px;
    line-height: 50px;
    border-radius: 12px;
  }
  .select-index {
    color: red;
  }
  .van-badge {
    border: none;
  }
}
</style>
